<template>
  <div id="app">
    <h2>form表单组件封装</h2>
    <form-coll :formData="formData" @inputsData="getInputsData"></form-coll>
    <div>表单值{{inputValue}}</div>
<!--    <color-red></color-red>-->
<!--    <sum-function :num1="num1" :num2="num2" v-on:getSumFromChild="receiveChildSum"></sum-function>-->
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  },
  data () {
    return {
      formData:[
        {formType:'aDate',placeholder:'请选择',initValue:'',prop:'date',name:'日期'},
        {formType:'aInput',placeholder:'请选择',initValue:'',prop:'name',name:'姓名'},
        {formType:'aRadio',initValue:'',prop:'sex',name:'单选',radioLable:[{value:0,lable:'男'},{value:1,lable:'女'}]},
        {formType:'aSelect',placeholder:'请选择',initValue:'',prop:'type',name:'类型选择',selectLable:[{value:0,lable:'aInput'},{value:1,lable:'aRadio'}]},
      ],//表单数据 formType：表单类型 placeholder：表单提示，initValue：初始值 prop：绑定的字段 ，name：表单名
      inputValue:{},//获取表单数据
    }
  },
  methods:{
    //获取表单数据
    getInputsData(inputValue){
      this.inputValue = inputValue
    }

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  padding:20px
}
</style>
